<template>

  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested"
                class="title-icon" />订单管理</h3>

    <el-card>
      <div slot="header">
        <span>订单详情</span>
      </div>
      <div>
        <span style="display: inline-block;margin-bottom:10px;">客户信息</span>
        <el-form :inline="true"
                 :model="formInline"
                 class="demo-form-inline">
          <el-form-item label="姓名:"
                        style="margin-right:50px;margin-bottom: 15px;">
            <span>{{formInline.userName}}</span>
          </el-form-item>
          <el-form-item label="手机号码:"
                        style="margin-right:50px;margin-bottom: 15px;">
            <span>{{formInline.userPhone}}</span>
          </el-form-item>
          <el-form-item label="身份证:"
                        style="margin-right:50px;margin-bottom: 15px;">
            <span>{{formInline.userIdCard}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div style="border-top:1px solid #e6ebf5;margin-bottom:10px;">
        <h3>付款信息</h3>
        <el-table :data="tableData"
                  border
                  stripe
                  style="width: 100%;margin-bottom:10px;">
          <el-table-column prop="id"
                           label="序号">
          </el-table-column>
          <el-table-column prop="orderNo"
                           label="订单编号">
          </el-table-column>
          <el-table-column prop="userName"
                           label="客户姓名">
          </el-table-column>
          <el-table-column prop="userPhone"
                           label="手机号">
          </el-table-column>
          <el-table-column prop="userIdCard"
                           label="身份证">
          </el-table-column>
          <el-table-column prop="salesOrderId"
                           label="销售单ID">
          </el-table-column>
          <el-table-column prop="projectName"
                           label="项目">
          </el-table-column>
          <el-table-column label="房号">
            <template slot-scope="scope">{{scope.row.loudong}}栋{{scope.row.roomNo}}号</template>
          </el-table-column>
          <el-table-column prop="moneyType"
                           label="款项类型">
          </el-table-column>
          <el-table-column prop="amountReceived"
                           label="金额">
          </el-table-column>
          <el-table-column label="付款时间">
            <template slot-scope="scope">
              {{scope.row.transactionHour|getTime}}
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary"
                   @click="getFlow">查看此房间付款流水</el-button>
        <el-table :data="list"
                  border
                  stripe
                  v-if="showFlow"
                  style="width: 100%;margin-bottom:10px;margin-top:20px">
          <el-table-column prop="id"
                           label="序号">
          </el-table-column>
          <el-table-column prop="orderNo"
                           label="订单编号">
          </el-table-column>
          <el-table-column prop="userName"
                           label="客户姓名">
          </el-table-column>
          <el-table-column prop="userPhone"
                           label="手机号">
          </el-table-column>
          <el-table-column prop="userIdCard"
                           label="身份证">
          </el-table-column>
          <el-table-column prop="salesOrderId"
                           label="销售单ID">
          </el-table-column>
          <el-table-column prop="projectName"
                           label="项目">
          </el-table-column>
          <el-table-column label="房号">
            <template slot-scope="scope">{{scope.row.loudong}}栋{{scope.row.roomNo}}号</template>
          </el-table-column>
          <el-table-column prop="moneyType"
                           label="款项类型">
          </el-table-column>
          <el-table-column prop="amountReceived"
                           label="金额">
          </el-table-column>
          <el-table-column label="付款时间">
            <template slot-scope="scope">
              {{scope.row.transactionHour|getTime}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>

</template>

<script>
import { getDetail, getDetailList } from '@/api/order'
export default {
  name: "detailManage",
  data () {
    return {
      formInline: {
        userPhone: '',
        userName: '',
        userIdCard: '',
      },
      tableData: [],
      id: '',
      list: [],
      showFlow: false,
    };
  },
  mounted () {
    this.id = this.$route.query.id;
    this.getD(this.id)
  },
  filters: {
    getTime (timestamp) {
      var time = new Date(timestamp);
      var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
      var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
      M = m < 10 ? "0" + M : M;
      var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
      d = d < 10 ? "0" + d : d;
      var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
      h = h < 10 ? "0" + h : h;
      var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
      m = m < 10 ? "0" + m : m;
      var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
      s = s < 10 ? "0" + s : s;
      return y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  methods: {
    getD (id) {
      getDetail(id).then(res => {
        this.formInline = res.data;
        this.tableData = [];
        this.tableData.push(res.data);
      })
    },

    getFlow () {
      this.showFlow = !this.showFlow
      if (this.showFlow) {
        getDetailList(this.id).then(res => {
          this.list = res.data.list;
        })
      }

    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    padding: 18px 0;
    margin: 0 20px;
  }
}
.title-small {
  font-size: 14px;
}

.money {
  color: #409eff;
}
</style>
